<template>
  <section class="electronic-evidence">
    <div class="content">
      <h2 class="title">电子取证</h2>
      <p class="subtitle">
        区块链存证+国家授时中心可信时间戳+互联网法院认证，技术、行政、司法三重固证，权威高效、司法效力强!
      </p>
    </div>

    <div class="evidence-box">
      <!-- 网页取证 -->
      <div class="evidence-item">
        <img 
          class="evidence-icon"
          src="@/assets/homeimg/Artwork.png" 
          alt="网页取证"
        />
        <h3 class="evidence-title">网页取证</h3>
        <p class="evidence-desc">
          静态截屏取证，适用于网站对图片、文本等作品侵权的取证
        </p>
        <el-button 
          type="primary" 
          round 
          plain 
          class="evidence-btn"
          @click="handleWebEvidence"
        >
          网页取证
        </el-button>
      </div>

      <!-- 录屏取证 -->
      <div class="evidence-item">
        <img 
          class="evidence-icon"
          src="@/assets/homeimg/Artwor1k.png" 
          alt="录屏取证"
        />
        <h3 class="evidence-title">录屏取证</h3>
        <p class="evidence-desc">
          动态录屏取证，记录用户的电脑屏幕操作过程，取证完成一键固化，用户本地即可完成
        </p>
        <el-button 
          type="primary" 
          round 
          plain 
          class="evidence-btn"
          @click="handleScreenEvidence"
        >
          录屏取证
        </el-button>
      </div>
    </div>
  </section>
</template>

<script>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'ElectronicEvidence',

  setup() {
    const router = useRouter()

    const handleWebEvidence = () => {
      router.push('/electronic/index')
    }

    const handleScreenEvidence = () => {
      router.push('/electronic/index')
    }

    return {
      handleWebEvidence,
      handleScreenEvidence
    }
  }
})
</script>

<style lang="scss" scoped>
.electronic-evidence {
  width: 100%;
  padding: 40px 0;
  background-color: $background-color-white;
  text-align: center;

  .content {
    width: $container-width;
    margin: 0 auto;

    .title {
      font-size: $font-size-extra-large;
      color: #333;
      font-weight: bold;
      margin: 0;
    }

    .subtitle {
      font-size: $font-size-small;
      color: #999;
      line-height: 25px;
      margin-top: $spacing-small;
    }
  }

  .evidence-box {
    width: $container-width;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: $spacing-large;

    .evidence-item {
      width: 550px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: $spacing-extra-large 0;

      .evidence-icon {
        width: 234px;
        border-radius: 50%;
      }

      .evidence-title {
        font-size: $font-size-large;
        color: #333;
        font-weight: bold;
        margin: $spacing-large 0 $spacing-small;
      }

      .evidence-desc {
        width: 292px;
        font-size: $font-size-small;
        color: #999;
        line-height: 25px;
        margin: 0;
      }

      .evidence-btn {
        padding: $spacing-small $spacing-extra-large;
        margin-top: $spacing-large;

        &:hover {
          color: $background-color-white;
          background-color: $primary-color;
          border-color: $primary-color;
        }
      }
    }
  }
}
</style> 